import { stringify } from "querystring";
import { FC, useState } from "react";
const UseStateCom: FC<any> = () => {
    // useState能够在函数组件中 '钩入'状态
    // 设置状态一定要传入一个新的状态
    let [num, setNum] = useState<number>(10)
    // console.log(useState(20));
    let [userInfo,setUserInfo]=useState<{username:string,password:string,age:number}>({username:'',password:'123',age:18})

    // 自增
    const increaseNum=()=>{
        setNum(num+1)
    }
    // 自减
    const decreaseNum=()=>{
        setNum(num-1)
    }
    return (
        <fieldset>
            <legend>stateHook</legend>
            <button onClick={decreaseNum}>-</button>
            --
            <b>{num}</b>
            --
            <button onClick={increaseNum}>+</button>

            <h3>username:{userInfo.username}</h3>
            <button onClick={()=>{
                setUserInfo({...userInfo,username:'www'})
            }}>登入</button>
        </fieldset>
    )
}

export default UseStateCom